(function () {
    var _t = CE.WIDGETS.TABS = {

        // Dimensional constraints on the tab panel.
        MAX_WIDTH: 200,
        MIN_WIDTH: 500,

        init: function () {

            this.$ = $('.tab');
            this.img_count = 0;
            this.space_dec = 177;
            // switch the tab when clicked.
            this.$.click(this.toggle);
            // tab menu click event handler.
            $('#ce_right').click(this.content_click);
            this.FILTERS.set('photo');
            CE.reset_layout.on(this.layout);
        },

        inc_imgcount: function () {
            _t.img_count++;
        },

        reset: function () {
            _t.img_count--;
            if (_t.img_count == 0) _t.layout();
        },

        /* re-flow the tabs layout & scrollbar config */
        layout: function () {

            var map_height = $(window).height() - 60;
            var r_ttl = 0; // total right side height.
            var tab_count = 0;

            var $stabs = CE.$tabs.filter(":visible").not("#ce_tab_media_content");

            $stabs.css('height', 'auto').each(function () {
                tab_count++;
                r_ttl += $(this).height() + 14;
            });

            var $media_tab = $('#ce_tab_media_content');
            var r_extra = map_height - _t.space_dec - r_ttl - 14;
            // give extra space to media tab.
            if (r_extra > 90) {
                $stabs.each(function () {
                    $(this).height($(this).height());
                });
                $media_tab.height(r_extra);
            } else { // split any space deficit.
                r_ttl += $media_tab.height();
                r_ttl -= 14 * tab_count;
                $stabs.each(function () {
                    $(this).css('height', $(this).height() / r_ttl * (map_height - _t.space_dec - 14 * (tab_count + 1)) + 'px');
                });
                $media_tab.height($media_tab.height() / r_ttl * (map_height - _t.space_dec - 14 * (tab_count + 1)) + 'px');
            }

        },

        toggle: function (evt) {

            var $tgt = $(evt.target);
            $tgt.next()[
            $tgt.hasClass('tab-active') ? 'hide' : 'show']();
            $tgt.toggleClass('tab-active');
            _t.layout();
        },

        content_click: function (evt) {

            var id = evt.target.id || $(evt.target).parent().attr('id');
            if (/^label_/.test(id)) {

                feature = CE.MEDIA.get_feature_by_label(id);
                CE.MEDIA.dialog(feature, {
                    recenter: true
                });

            } else if (/^legend_item_/.test(id)) {

                var layer_id = id.replace("legend_item_", "OpenLayers.Layer.");
                CE.LAYERS.selected_layer = CE.LAYERS.get_layer_by_id(layer_id);
                CE.LAYERS.layer_dialog(CE.LAYERS.selected_layer);

            } else if (/_filter$/.test(id)) {

                filter_type = id.replace("_filter", "");
                _t.FILTERS.set(filter_type);
                _t.layout();
            }
        },

        FILTERS: {
            offset: {
                photo: 0,
                sound: 0,
                movie: 0,
                chart: 0,
                story: 0
                // GG: these values are if we want them aligned with 
                //     the icon above the text (commented for now)
                //photo:0,
                //sound:44,
                //movie:89,
                //chart:136,
                //story:163
            },

            colors: {
                photo: '#ffc400',
                sound: '#7cdf00',
                movie: '#dd20ff',
                chart: '#ff001c',
                story: '#20cdff'
            },

            set: function (filter_type) {
                $('h2.filter-name').text(filter_type.toUpperCase()).css({
                    color: this.colors[filter_type],
                    'margin-left': this.offset[filter_type] + 'px'
                });
                CE.MEDIA.filter = filter_type;
                CE.MEDIA.list.refresh();
            }
        }
    };

})();